<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="注册"
        right-text="去登录"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </header>
    <div class="content">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="userName"
          label="用户名"
          clearable
          placeholder="用户名"
          :right-icon="userTip"
        />
        <van-field
          v-model="tel"
          name="tel"
          clearable
          label="手机号"
          placeholder="手机号"
          @input="telT"
          :right-icon="telTip"
        />
        <van-field
          v-model="sms"
          name="code"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
          :right-icon="smsTip"
        >
          <template #button>
            <van-button size="small" type="primary" :disabled="smsFlag" @click="send">{{smsMsg}}</van-button>
          </template>
        </van-field>
        <van-field
          v-model="password"
          type="password"
          name="passWord"
          label="密码"
          clearable
          placeholder="密码"
          :right-icon="passwordTip"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" :disabled="allTip">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Toast } from 'vant'
import { sendCode, register } from '../../api/index.js'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)

export default {
  data () {
    return {
      username: '',
      tel: '',
      sms: '',
      password: '',
      smsFlag: true,
      smsMsg: '发送验证码',
      t: null,
      time: 60
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      this.$router.push('/login')
    },
    onSubmit (val) {
      // vant的表单中只要有按钮,就会触发submit,根据表单的验证状态,决定是否触发submit
      if (this.allTip) {
        return
      }
      // console.log('这是提交事件')
      const that = this
      // 调用注册接口
      register(val).then(res => {
        // 根据注册接口返回的数据,做出对应提示
        switch (res.data.state) {
          case 201:
            Toast('用户名已被注册')
            break
          case 202:
            Toast('请先发送验证码')
            this.sms = ''
            break
          case 203:
            Toast('手机号已被注册')
            break
          case 204:
            Toast('验证码不正确')
            this.sms = ''
            break
          case 200:
            // 注册成功,给出提示,提示关闭后,自动跳转到登录
            Toast({
              message: '注册成功',
              onClose () {
                that.$router.push('/login')
              }
            })
            break
        }
      })
    },
    telT () {
      // 发送验证码按钮的可用性
      if (this.telTip === 'success') {
        this.smsFlag = false
      } else {
        this.smsFlag = true
      }
    },
    send () {
      // 发送验证码
      sendCode({ tel: this.tel }).then(res => {
        if (res.data.state === 201) {
          Toast('手机号已被注册')
        } else {
          Toast('发送成功')
        }
      })
      // 点击发送验证码后，无论成功或失败，都开启 倒计时 功能
      // 禁用发送按钮
      this.smsFlag = true
      // 修改发送按钮的文本
      this.smsMsg = this.time + 's后重新发送'
      // 开启计时器
      this.t = setInterval(() => {
        // 倒计时
        this.time--
        // 设置发送按钮的文本
        this.smsMsg = this.time + 's后重新发送'
        // 判断倒计时是否结束
        if (this.time <= 0) {
          // 清除计时器
          clearInterval(this.t)
          // 修改文本
          this.smsMsg = '发送验证码'
          // 重置倒计时
          this.time = 60
          // 启用发送按钮
          this.smsFlag = false
        }
      }, 1000)
    }
  },
  computed: {
    userTip () {
      // 用户名的正则验证
      if (/^.{2,12}$/.test(this.username)) {
        return 'success'
      } else {
        return ''
      }
    },
    telTip () {
      if (/^1[3-9]\d{9}$/.test(this.tel)) {
        return 'success'
      } else {
        return ''
      }
    },
    smsTip () {
      if (/^\d{4}$/.test(this.sms)) {
        return 'success'
      } else {
        return ''
      }
    },
    passwordTip () {
      if (/^\w{6,12}$/.test(this.password)) {
        return 'success'
      } else {
        return ''
      }
    },
    allTip () {
      // 注册按钮的可用状态,根据所有输入框的状态决定
      if (this.userTip && this.telTip && this.smsTip && this.passwordTip) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style>
</style>
